<template>
  <div>
    <a-modal
      :title="type=='look'?'活动预览':type=='add'?'活动制作':'编辑活动'"
      :visible="visible"
      :footer="null"
      :width="800"
      @cancel="visible=false"
      :bodyStyle="{textAlign:'center',padding:'0px'}"
    >
      <div class="phone">
        <div class="top">

          <span class="time-icon">14:58</span>
          <a-icon type="wifi" style="margin-left:180px;" />
          <span class="electric" style="margin-left:4px;">
            <img src="~@/assets/img/electric.png" alt />
          </span>
          <div class="title">{{title}}</div>
        </div>

        <iframe :src="url" v-if="visible" class="phoneIframe" frameborder="0"></iframe>
      </div>
    </a-modal>
    <a-modal
      title="保存活动"
      :visible="saveVisible"
      @cancel="saveVisible=false"
      :footer="null"
      :bodyStyle="{padding:0}"
      centered
    >
      <a-result
        status="success"
        title="活动已保存成功!"
        sub-title="点击“发布活动”，即可快速完活动发布噢～"
        class="mySelfExtraArea"
      >
        <div class="devide"></div>
        <div class="displayFlex">
          <div class="left">
            <vue-qr
              :text="
             hostUrl+`/h5/#/pagesRecruit/templates/templates?sid=` +$store.state.user.school +`&type=` +
             wxAppData.template.cate +`&tid=` +
             wxAppData.template_id +
             `&operation=prev` +
             `&id=` +
             wxAppData.id
            "
              :size="80"
              :margin="0"
              class="qrcode"
            ></vue-qr>
          </div>
          <div class="right">
            <h2 style="font-size:14px;">微信扫一扫，手机端预览活动</h2>
            <p>别忘记先发布活动再分享哟～</p>
          </div>
        </div>
      </a-result>
      <div
        style="padding: 10px 16px;text-align: right;background: transparent;border-top: 1px solid #e8e8e8;border-radius: 0 0 4px 4px;"
      >
        <a-button style="margin-right:20px;" @click="again()">再编辑一下</a-button>
        <a-button type="primary" @click="publish(wxAppData.id)">发布活动</a-button>
      </div>
    </a-modal>
    <a-modal
      title="修改活动"
      :visible="editVisible"
      @cancel="editVisible=false"
      :footer="null"
      :bodyStyle="{padding:0}"
      centered
    >
      <a-result
        status="success"
        title="活动修改成功!"
        sub-title="微信扫描下方二维码，可查看并分享活动噢～"
        class="mySelfExtraArea"
      >
        <div style="text-align:center">
          <vue-qr
            :text="
            hostUrl+`/h5/#/pagesRecruit/templates/templates?sid=` +$store.state.user.school +`&type=` +
             wxAppData.template.cate +`&tid=` +
             wxAppData.template_id +
             `&operation=show` +
             `&id=` +
             wxAppData.id
            "
            :size="100"
            :margin="0"
            class="qrcode"
          ></vue-qr>
        </div>
      </a-result>
      <div
        style="padding: 10px 16px;text-align: right;background: transparent;border-top: 1px solid #e8e8e8;border-radius: 0 0 4px 4px;"
      >
        <a-button type="primary" @click="editFinish()">确定</a-button>
      </div>
    </a-modal>
  </div>
</template>

<script>
import QRCode from 'qrcodejs2'
import vueQr from 'vue-qr'
import { publishActivity, chainsCreate, chainsEdit } from '@/api/activity'
export default {
  name: 'lookActive',
  components: {
    vueQr,
  },
  data() {
    return {
      vueId: 'myParentId',
      visible: false,
      url: null,
      type: 'look',
      title: null,
      saveVisible: false,
      editVisible: false,
      hostUrl: '',
      wxAppData: {
        //假数据
        id: 14,
        template_id: 3027093031,
        template: {
          title: '全民接龙',
          cover: 'https://devedu.weliam.cn/uploads/global/activity/chains/1/cover.png',
          cate: 'chains',
          scenes: ['autumn', 'hot'],
        },
        main_image: ['../../static/images/recruit/flyers-img1.png'],
        activity_title: '最低99元！【小麦教育】夏日大放送，限时优惠“砍”得到！',
        mechanism_name: '微连科技',
        start_time: 1595215200,
        end_time: 1603164000,
        rules: {
          name: '99元享秋季精品课体验课3节',
          describe:
            '儿童创意绘画是启发少儿思维及智力的有效载体,儿童绘画能力的发展与其心理发展紧密相连。通过系统学习,可以提升少儿的注意力、观察力、想象力、创造力等思维能力、绘画能力、动手操作能力、学习能力及性格能力,同时还可以培养孩子发现美、创造美、体验',
          class_img: [],
          programme: [{ number: 2, price: 1299, text: '' }],
          number: 10,
          signupCheck: false,
          payCheck: true,
          attribute: 2,
          explain_text:
            '<p>【奖品说明】</p><p>1.活动对象：新老生均可参加2.活动福利：仅需88元即可报名购买4节精品体验课</p><p>3.本活动每人仅可购买1次，不可重复叠加。</p><br><p>【报名规则】</p><p>1.支付88元完成报名</p><p>2.每个用户只能报名一次。</p><p>3.报名成功后，请联系机构兑换相应课程安排上课时间。</p>',
          contact_text:
            '<p>①领奖时间：活动结束后即可兑奖</p><p>②领奖地址：XX教育本地校区</p><p>③联系电话：400-6677-456<br>扫码添加课程顾问老师，获取更多优惠信息</p>',
          ewmimg: [],
        },
        introduce: [
          {
            text:
              'XX教育是浙江省实力卓越的民营艺术类教育培训机构，专注于4-12岁孩子的美术培训。在杭州，宁波，嘉兴都设有分校区。',
            type: 'text',
          },
        ],
        other: {
          phone_number: '',
          bulletchatCheck: false,
          messageCheck: false,
          signUpCheck: false,
          sign_up: [],
          template_type: 1,
          template_name: '全民接龙',
        },
        is_release: null,
        qrcode: null,
        poster: null,
        parent_can_see: null,
        created_at: '2020-08-20 16:12',
        student: [],
        school_name: '大耳狐',
        views_number: null,
        remaining_time: '还剩：60天19小时7分',
      },
    }
  },
  created() {
    if(process.env.NODE_ENV === "development"){
      this.hostUrl='http://192.168.3.147:8080'
    }else{
      let ishttps = 'https:' == document.location.protocol ? true : false
      if (ishttps) {
        this.hostUrl = 'https://' + window.location.host
      } else {
        this.hostUrl = 'http://' + window.location.host
      }
    }
    
  },
  methods: {
    again() {
      this.visible = false
      this.saveVisible = false
      let params = {
        cate: this.wxAppData.template.cate,
        id: this.wxAppData.template_id,
        activityID: this.wxAppData.id,
      }
      this.$emit('again', params)
    },
    editFinish() {
      this.editVisible = false
      this.visible = false
      this.$emit('reload')
    },
    showModel(data, type) {
      if (type) {
        this.type = type
      }
      if (data) {
        this.title = data.title
        if (data.cate == 'lottery' || data.cate == 'vote') {
          this.url =
            this.hostUrl +
            `/h5/#/pagesRecruit/otherTemplates/otherTemplates?sid=` +
            this.$store.state.user.school +
            `&type=` +
            data.cate +
            `&tid=` +
            data.id +
            `&operation=` +
            type +
            `&id=` +
            data.activityID
        } else {
          this.url =
            this.hostUrl +
            `/h5/#/pagesRecruit/templates/templates?sid=` +
            this.$store.state.user.school +
            `&type=` +
            data.cate +
            `&tid=` +
            data.id +
            `&operation=` +
            type +
            `&id=` +
            data.activityID
        }
        // if (data.cate == 'lottery' || data.cate == 'vote') {
        //   this.url =
        //     `https://devedu.weliam.cn` +
        //     `/h5/#/pagesRecruit/otherTemplates/otherTemplates?sid=` +
        //     this.$store.state.user.school +
        //     `&type=` +
        //     data.cate +
        //     `&tid=` +
        //     data.id +
        //     `&operation=` +
        //     type +
        //     `&id=` +
        //     data.activityID
        // } else {
        //   this.url =
        //     `https://devedu.weliam.cn` +
        //     `/h5/#/pagesRecruit/templates/templates?sid=` +
        //     this.$store.state.user.school +
        //     `&type=` +
        //     data.cate +
        //     `&tid=` +
        //     data.id +
        //     `&operation=` +
        //     type +
        //     `&id=` +
        //     data.activityID
        // }
        this.visible = true
      }
    },
    publish(id) {
      let that = this
      this.$confirm({
        title: '温馨提醒',
        content: '确定发布活动吗?',
        onOk() {
          publishActivity(id)
            .then((res) => {
              that.$message.success('发布成功')
              that.saveVisible = false
              that.visible = false
              that.$router.push({ name: 'market' })
            })
            .catch((err) => {
              that.$message.error(err.data.message || '发布失败')
            })
        },
        onCancel() {},
      })
    },
  },
  mounted() {
    let that = this
    window.addEventListener('message', function (event) {
      console.log(event)
      if (event.data && event.data.data && event.data.type == 'add') {
        that.wxAppData = event.data.data
        that.saveVisible = true
        // console.log(
        //   `https://devedu.weliam.cn` +
        //     `/h5/#/pagesRecruit/templates/templates?sid=` +
        //     that.$store.state.user.school +
        //     `&type=` +
        //     that.wxAppData.template.cate +
        //     `&tid=` +
        //     that.wxAppData.template_id +
        //     `&operation=show` +
        //     `&id=` +
        //     that.wxAppData.id
        // )
        return
      } else if (event.data && event.data.data && event.data.type == 'edit') {
        that.wxAppData = event.data.data
        that.editVisible = true
        // console.log(
        //   `https://devedu.weliam.cn` +
        //     `/h5/#/pagesRecruit/templates/templates?sid=` +
        //     that.$store.state.user.school +
        //     `&type=` +
        //     that.wxAppData.template.cate +
        //     `&tid=` +
        //     that.wxAppData.template_id +
        //     `&operation=show` +
        //     `&id=` +
        //     that.wxAppData.id
        // )
        return
      } else if (event.data && event.data.data && event.data.data.type == 'err') {
        that.$message.error(event.data.data.message)
        return
      }else if (event.data&&event.data.data&&event.data.type=='changeName'){
        that.title=event.data.data
        console.log('123333')
      }
    })
  },
}
</script>


<style lang="less">
.mySelfExtraArea {
  .ant-result-content {
    background-color: transparent !important;
    padding: 0 40px !important;
  }
}
</style>
<style lang="less" scoped>
.displayFlex {
  display: flex;
  justify-content: center;
  align-items: center;
  .left {
    width: 80px;
    height: 80px;
    overflow: hidden;
  }
  .right {
    margin-left: 14px;
    font-size: 14px;
    color: #999;
    margin-top: 8px;
  }
}
.devide {
  width: 400px;
  height: 1px;
  border: 1px solid;
  -webkit-border-image: -webkit-gradient(
      linear,
      right top,
      left top,
      from(hsla(0, 0%, 91%, 0.02)),
      color-stop(#e8e8e8),
      to(hsla(0, 0%, 91%, 0))
    )
    1 1;
  -webkit-border-image: -webkit-linear-gradient(right, hsla(0, 0%, 91%, 0.02), #e8e8e8, hsla(0, 0%, 91%, 0)) 1 1;
  -o-border-image: -o-linear-gradient(right, hsla(0, 0%, 91%, 0.02), #e8e8e8, hsla(0, 0%, 91%, 0)) 1 1;
  border-image: -webkit-gradient(
      linear,
      right top,
      left top,
      from(hsla(0, 0%, 91%, 0.02)),
      color-stop(#e8e8e8),
      to(hsla(0, 0%, 91%, 0))
    )
    1 1;
  border-image: linear-gradient(270deg, hsla(0, 0%, 91%, 0.02), #e8e8e8, hsla(0, 0%, 91%, 0)) 1 1;
  margin: 32px 0 26px;
}
.phone {
  display: inline-block;
  position: relative;
  width: 410px;
  height: 690px;
  padding: 54px;
  padding-top: 45px;
  box-sizing: border-box;
  background-image: url('~@/assets/img/phoneActivity.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: 50%;
  .top {
    height: 66px;
    width: 100%;
    line-height: 35px;
    border-radius: 35px 35px 0 0;
    background: linear-gradient(1turn, #2c2d31, #101013);
    text-align: left;
    color: #fff;
    .title {
      text-align: center;
      position: relative;
      top: -5px;
    }
    .time-icon {
      display: inline-block;
      margin-left: 20px;
      width: 38px;
      font-size: 11px;
    }
    .electric {
      margin-left: 4px;
      position: relative;
      top: -2px;
    }
  }
  .top:before {
    content: '';
    position: absolute;
    display: block;
    z-index: 10;
    border-radius: 0 0 15px 15px;
    background-size: 100%;
    top: 44px;
    left: 125px;
    background: url('~@/assets/img/phoneTop.png') no-repeat 50%;
    width: 160px;
    height: 30px;
  }
  .phoneIframe {
    width: 100%;
    height: 528px;
    border-radius: 0 0 30px 30px;
  }
}
</style>